<!--
<template>
  &lt;!&ndash;<Index/>&ndash;&gt;
  <AdminIndex v-if="userStore.roles.some(role => role === 'commonAdmin'|| role==='admin')"/>
  <Index/>
</template>

<script setup name="Index">
import Index from "@/components/operLogs/index.vue"
import AdminIndex from "@/components/adminIndex/adminIndex.vue";
import useUserStore from "@/store/modules/user.js";
const userStore = useUserStore();
onMounted(()=>{
  console.log("1121",userStore.roles)
})
</script>

<style scoped lang="scss">

</style>

-->
<template>
  <!-- <div class="admin-container" v-if="isAdmin">
     &lt;!&ndash; 头部区域 &ndash;&gt;
     <div class="header">
       <div class="left">
         <h1>Admin，上午好！欢迎回来！</h1>
         <div class="timer-box" @mouseenter="showControl = true" @mouseleave="showControl = false">
           <span>您今天已工作了 {{ formattedTime }}</span>
           <button v-if="showControl" @click="toggleTimer">
             {{ isPaused ? '继续工作' : '休息一下' }}
           </button>
         </div>
       </div>
     </div>

     &lt;!&ndash; 数据概览 &ndash;&gt;
     <div class="data-overview">
       <div class="data-card" v-for="item in statsData" :key="item.title">
         <div class="data-content">
           <h3>{{ item.title }}</h3>
           <div class="data-value">{{ item.value }}</div>
           <div :class="['data-trend', item.trend > 0 ? 'up' : 'down']">
             {{ item.trend > 0 ? '+' : '' }}{{ item.trend }}%
           </div>
         </div>
       </div>
     </div>

   </div>-->

  <div class="admin-container" v-if="isAdmin">
    <admin-index/>
  </div>
  <div class="counselor-container" v-else>
    <counselor-index/>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, onBeforeUnmount} from 'vue'
import useUserStore from "@/store/modules/user.js";
import CounselorIndex from "@/components/counselorIndex/counselorIndex.vue";
import AdminIndex from "@/components/adminIndex/adminIndex.vue";

// 计时器逻辑
const seconds = ref(0)
const isPaused = ref(false)
const showControl = ref(false)
let timer = null
const userStore = useUserStore();
const isAdmin = computed(() => userStore.isAdmin)

const formattedTime = computed(() => {
  const h = Math.floor(seconds.value / 3600)
  const m = Math.floor((seconds.value % 3600) / 60)
  const s = seconds.value % 60
  return `${h.toString().padStart(2, '0')}小时${m.toString().padStart(2, '0')}分${s.toString().padStart(2, '0')}秒`
})

const toggleTimer = () => {
  isPaused.value = !isPaused.value
  if (!isPaused.value) startTimer()
}

const startTimer = () => {
  timer = setInterval(() => {
    if (!isPaused.value) seconds.value++
  }, 1000)
}

onMounted(() => {
  startTimer();
})
onBeforeUnmount(() => clearInterval(timer))

// 模拟数据
const statsData = ref([
  {
    title: '今日心理咨询量',
    value: '23 次',
    trend: 8,
    icon: 'icon-psychology',
    color: '#6A8DCA'
  },
  {
    title: '测评完成率',
    value: '89%',
    trend: -3,
    icon: 'icon-checklist',
    color: '#4CAF93'
  },
  {
    title: '心理危机预警',
    value: '5 例',
    trend: 2,
    icon: 'icon-alert',
    color: '#FF6B6B'
  },
  {
    title: '用户满意度',
    value: '4.8/5.0',
    trend: 0.2,
    icon: 'icon-star',
    color: '#FFD93D'
  }
])
</script>

<style scoped>
.admin-container {
  background: #f5f6fa;
  min-height: 100vh;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.timer-box {
  background: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s;
}

.timer-box button {
  background: #5b8ff9;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 4px;
  margin-left: 15px;
  cursor: pointer;
}

.data-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.data-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.up {
  color: #f56c6c;
}

.down {
  color: #67c23a;
}
</style>
